<template>
    <div class=''>
        <div class="menu" :class="menuStatus?'show':'hide'">
            <div class="list-item" :class="index == 'Theme'?'act':''" @click="selectTool('表单复制','Formcopy')">
                <Tooltip content="表单复制" placement="left">
                    <Icon type="md-copy" size="18" color="#ffffff" />
                </Tooltip>
            </div>
            <div class="list-item" :class="index == 'Linkage'?'act':''" @click="selectTool('','Linkage')">
                <Tooltip content="联动事件" placement="left">
                    <Icon type="md-git-compare" size="18" color="#ffffff" />
                </Tooltip>
            </div>
            <div class="list-item">
                <Divider dashed style="margin: 0;"/>
            </div>
            <div class="list-item" :class="curModel == 'pc'?'act':''" @click="curModel = 'pc'">
                <Tooltip content="pc模式" placement="left">
                    <Icon type="ios-desktop-outline" size="18" color="#ffffff" />
                </Tooltip>
            </div>
            <div class="list-item" :class="curModel == 'mobile'?'act':''" @click="curModel = 'mobile'">
                <Tooltip content="手机模式" placement="left">
                    <Icon type="ios-phone-portrait" size="18" color="#ffffff" />
                </Tooltip>
            </div>
            <div class="list-item yc" @click="changestatus(false)">
                <Tooltip content="隐藏工具栏" placement="left">
                    <Icon type="ios-arrow-dropright" size="18" color="#cccccc" />
                </Tooltip>
            </div>
        </div>
        <div class="openbox" :class="!menuStatus?'show':'hide'" @click="changestatus(true)">
            <Icon type="ios-arrow-back" size="18" color="#cccccc" />
        </div>
        <Modal v-model="modalStatus" :title="modalTitle" width="800" footer-hide @on-cancel="cancel">
            <component :is="index" v-on:close="index = ''"></component>
        </Modal>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            menuStatus: false,
            index: '',
            modalStatus: false,
            modalTitle: ''
        };
    },
    //监听属性 类似于data概念
    computed: {
        curModel:{
            get(){
                return this.$store.state.curModel;
            },
            set(val){
                this.$store.state.curModel = val;
            }
        }
    },
    //监控data中的数据变化
    watch: {
        index(val){
            if(val){
                this.modalStatus = true;
            }else{
                this.modalStatus = false;
            }
        }
    },
    //方法集合,
    methods: {
        //切换菜单状态
        changestatus(status) {
            this.menuStatus = status
        },
        cancel(){
            this.index = ''
        },
        selectTool(title,name){
            this.modalTitle = title;
            this.index = name
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    }
}
</script>
<style lang='less' scoped>
.menu {
    height: calc(100vh - 65px);
    background: #2c3e50;
    display: block;
    position: relative;

    .list-item {
        padding: 15px 10px;
        cursor: pointer;
        position: relative;
    }

    .list-item:hover {
        i {
            animation: rotate 1s;
        }
    }

    .yc {
        position: absolute;
        bottom: 15px;
        left: 0;
    }

    @keyframes rotate {
        from {
            transform: rotateX(0deg);
        }

        to {
            transform: rotateX(360deg);
        }
    }

    .act {
        background: #18bc9c;
    }
}

.openbox {
    position: absolute;
    top: 45%;
    right: 0px;
    height: 80px;
    background: #17233d;
    padding: 0 5px;
    line-height: 80px;
    border-radius: 6px 0 0 6px;
    z-index: 1;
}

.hide {
    animation: hideAct 0.5s;
    animation-fill-mode: forwards;
}

@keyframes hideAct {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(150%);
    }
}

.show {
    animation: showAct 0.5s;
    animation-fill-mode: forwards;
}

@keyframes showAct {
    from {
        transform: translateX(150%);
    }

    to {
        transform: translateX(0%);
    }
}
</style>